<template>
  <div
    class="applicationcode"
    @click="goback"
  >
    <header-bar
      v-if="!$route.meta.hideHeader"
      ref="header"
      :title="title"
    >
      <template>
        <svg-icon icon-class="addRom" class="add add-left" @click.native="getSource" />
      </template>
    </header-bar>
    <div class="content-title">

      <div style="display:flex;align-items:center;justify-content:space-between;padding-bottom:10.0px;font-weight:500;">
        <span style="font-size:14.0px;">隔离点名称</span>
        <span style="font-size:14.0px;">{{ count }}间</span>
      </div>
      <div style="display:flex;align-items:center;justify-content:space-between;padding-bottom:20.0px;font-weight:500;">
        <span style="font-size:14.0px;font-weight:400;color:gray;">{{ reportName }}</span>
      </div>
      <div style="display:flex;">
        <div style="display:flex;align-items:center;">
          <svg-icon icon-class="room-1" style="fill:#4989f2;color:#4989f2;" class="add add-left" />
          <span style="font-size:12.0px;">单人间</span>
        </div>
        <div style="display:flex;align-items:center;padding-left:30.0px;">
          <svg-icon icon-class="room-1" style="fill:#9B79FB;color:#9B79FB;" class="add add-left" />
          <span style="font-size:12.0px;">标间</span>
        </div>
        <!-- <div style="display:flex;align-items:center;padding-left:30.0px;">
          <svg-icon icon-class="room-1" style="fill:#FAD260;color:#FAD260;" class="add add-left" />
          <span style="font-size:12.0px;">三人间</span>
        </div> -->
        <div style="display:flex;align-items:center;padding-left:30.0px;">
          <svg-icon icon-class="room-1" style="fill:#F5863E;color:#F5863E;" class="add add-left" />
          <span style="font-size:12.0px;">其他</span>
        </div>
      </div>
      <div style="display:flex;margin:10.0px 0;">
        <div style="display:flex;align-items:center;">
          <svg-icon icon-class="room-2" style="fill:#4989f2;color:#4989f2;" class="add add-left" />
          <span style="font-size:12.0px;">占用</span>
        </div>
        <div style="display:flex;align-items:center;padding-left:30.0px;">
          <svg-icon icon-class="room-1" style="fill:#4989f2;color:#4989f2;" class="add add-left" />
          <span style="font-size:12.0px;">空闲</span>
        </div>
        <div style="display:flex;align-items:center;padding-left:30.0px;">
          <svg-icon icon-class="room-3" style="fill:#4989f2;color:#4989f2;" class="add add-left" />
          <span style="font-size:12.0px;">停用</span>
        </div>
        <div style="display:flex;align-items:center;padding-left:30.0px;">
          <svg-icon icon-class="xiaoromm" style="fill:#4989f2;color:#4989f2;" class="add add-left" />
          <span style="font-size:12.0px;">消杀</span>
        </div>
      </div>
    </div>
    <div id="content" ref="order" style="position:relative;" class="content" @click="showDeleteView=false">

      <!-- <van-empty v-else description="暂无数据" /> -->
      <div v-for="(item,index) in roomArr" :key="item" ref="box" class="icon-content" :class="[showDeleteView?'iconMove':'']" @touchstart.stop.prevent="longPress(item,index,$event)" @touchend.stop="removePress(item,index,e)" @touchmove.stop.prevent="touchmove(item,index,$event)">
        <div style="position:relative;">
          <svg-icon v-if="showDeleteView" icon-class="deleteIcon" style="position:absolute;top:0;width:10.0px;height:10.0px;right:0;" class="add" />
          <span style="text-align:center;display:block;">
            <svg-icon :icon-class="getType(item)" :style="{'color':getColor(item),'fill':getColor(item)}" style="padding-right:2.0px;" class="add" />
          </span>
          <span style="font-size:12.0px;text-align:center;">{{ item.roomNum }}</span>
        </div>
      </div>
      <div style="width:100%;height:160.0px;" :class="[showTitlePaddingTop?'title-message':'']" />
    </div>
    <div>
      <van-tabbar v-model="active" placeholder safe-area-inset-bottom @change="onChange">
        <div style="display:flex;width:300.0px;margin:5.0px auto;">
          <van-button round type="info" style="margin:0.0px auto;" @click="deleteShow=true">批量更改状态</van-button>
        </div>
      </van-tabbar>
      <div style="width:100%;height:100px;" :class="[showTitlePaddingTop?'title-message':'']" />
    </div>
    <van-dialog v-model="deleteShow" title="更改房间状态" show-cancel-button show-confirm-button @cancel="deleteShow=false" @confirm="confirmRoom">
      <div class="contentDialog">
        <van-checkbox-group v-model="room.idList">
          <van-checkbox v-for="(item,index) in roomArr" :key="index" :name="item.id">{{ item.roomNum }}</van-checkbox>

        </van-checkbox-group>
        <van-cell class="van-cell--required" title="房间状态" :value="room.statusText" is-link @click="getAdmin" />

      </div>
    </van-dialog>

    <van-popup v-model="showAre" position="bottom" :style="{ height: '50%' }">
      <van-picker
        title="状态"
        show-toolbar
        :columns="columnAre"
        @confirm="onConfirmAre"
        @cancel="showAre=false"
      />
    </van-popup>
  </div>
</template>
<script>
import Vue from 'vue'

import { Toast, Dialog, Icon, List } from 'vant'
import { PullRefresh } from 'vant'
import { Search } from 'vant'
import { Tabbar, TabbarItem } from 'vant'
import { DatetimePicker } from 'vant'
import { Button } from 'vant'
import { Empty } from 'vant'
import { Checkbox, CheckboxGroup, Popup, Picker } from 'vant'

Vue.use(Checkbox)
Vue.use(CheckboxGroup)
Vue.use(Popup)
Vue.use(Picker)
Vue.use(Empty)
Vue.use(Button)
Vue.use(Tabbar)
Vue.use(TabbarItem)
Vue.use(Search)
Vue.use(PullRefresh)
Vue.use(Toast).use(Dialog).use(Icon).use(List).use(DatetimePicker)
import { Cell, CellGroup } from 'vant'

Vue.use(Cell)
Vue.use(CellGroup)
import $api from '@/api/index'

import { mapGetters } from 'vuex'
export default {
  name: 'Applicationcode',
  beforeRouteLeave(to, from, next) {
    sessionStorage.setItem('scrollHRoom', document.getElementById('content').scrollTop)
    next()
  },
  data() {
    return {
      roomArr: [],
      showTime: false,
      value: '',
      showClockTime: false,
      reportInfo: [],
      title: '',
      titleValue: '',
      showTimeRemove: false,
      realTime: this.dateFormat('YYYY-mm-dd HH:MM:SS', new Date()),
      count: 0,
      touchstartTime: '',
      isLongpress: false,
      touchendTime: '',
      showDeleteView: false,
      timer: null,
      deleteShow: false,
      showAre: false,
      room: {
        idList: [],
        statusText: '',
        status: ''
      },
      columnAre: [{ text: '空闲', id: 1, disabled: false }, { text: '占用', id: 2, disabled: false }, { text: '消杀', id: 3, disabled: false }, { text: '停用', id: 4, disabled: false }]

    }
  },
  computed: {
    ...mapGetters([
      'reportId',
      'reportName',
      'parentName',
      'createId'
    ]),
    showTitlePaddingTop() {
      return this.$store.state.user.showTitlePaddingTop
    }
  },

  beforeCreate() {
    this.$store.dispatch('user/showView', this.$route.name)

    this.$dd.hideTitleBar()
    console.log(this.$store)
  },
  activated() {
    this.realTime = this.dateFormat('YYYY-mm-dd HH:MM:SS', new Date())
    if (sessionStorage.getItem('applictionTitle')) {
      this.title = sessionStorage.getItem('applictionTitle')
    }
    this.$dd.hideTitleBar()
    this.$dd.setTitle({
      title: ''
    }).then(res => {
      console.log(res)
    }).catch(err => { console.log(err) })
    // if (this.$route.query.refresh) {
    //   this.obj.pageNum = 1
    //   this.list = []
    //   this.pageInfoList()
    // } else {

    // }
    if (this.$store.state.user.refresh) {
      if (sessionStorage.getItem('keepAlive')) {
        sessionStorage.setItem('keepAlive', false)
        this.list = []
      }

      this.getCountMessage()
    }
    if (this.$route.params.refresh) {
      this.roomArr = []
      this.getCountMessage()
    }
    this.getCountMessage()
    if (sessionStorage.getItem('scrollHRoom')) {
      document.getElementById('content').scrollTop = sessionStorage.getItem('scrollHRoom')
    }
    // this.$store.dispatch('user/show', true)
  },
  mounted() {
    if (sessionStorage.getItem('applictionTitle')) {
      this.title = sessionStorage.getItem('applictionTitle')
    }
    this.$nextTick(() => {
      document.getElementsByClassName('van-nav-bar__placeholder')[0].style.height = '40px'
      window.addEventListener('click', (e) => {
        if (!this.$refs.box.contains(e.target)) {
          this.showDeleteView = false
        }
      })
    })
    if (this.$until.h5userAgent() === 1) {
      this.$store.dispatch('user/showTitle', true)
    }
    this.getCountMessage()
    this.$dd.ready(() => {
      this.$dd.hideTitleBar()
      this.$dd.setTitle({
        title: ''
      }).then(res => {
        console.log(res)
      }).catch(err => { console.log(err) })
    })
    this.pageInfoList()
    this.$refs.order.style.height = '100%'
  },
  beforeDestroy() {
    this.showDeleteView = false
  },
  methods: {
    goback() {
    },
    changeValue(value) {
      this.obj.name = value
    },
    getData() {},
    addPersonMessage() {
      this.$store.dispatch('user/showView', 'ShowCode')
      this.$router.push({ path: '/code/index', query: {
        state: '1'
      }})
    },
    getCountMessage() {
      $api.user.quarantineRoom({ organizationCode: this.reportId }).then(res => {
        if (res.data.length !== 0) {
          this.roomArr = res.data.list
          this.count = res.data.count
        }
      })
    },
    dateFormat(fmt, date) {
      let ret
      const opt = {
        'Y+': date.getFullYear().toString(), // 年
        'm+': (date.getMonth() + 1).toString(), // 月
        'd+': date.getDate().toString(), // 日
        'H+': date.getHours().toString(), // 时
        'M+': date.getMinutes().toString(), // 分
        'S+': date.getSeconds().toString() // 秒
      }
      for (const k in opt) {
        ret = new RegExp('(' + k + ')').exec(fmt)
        if (ret) {
          fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, '0')))
        }
      }
      return fmt
    },
    onSearchTitle() {
      this.getCountMessage()
    },

    getColor(arg) {
      switch (arg.type) {
        case 1:
          return '#4989F2'
        case 2:
          return '#9B79FB'
        case 3:
          return '#F5863E'
        default:
          return ''
      }
    },
    getType(arg) {
      switch (arg.status) {
        case 1:
          return 'room-1'
        case 2:
          return 'room-2'
        case 3:
          return 'xiaoromm'
        case 4:
          return 'room-3'
        default:
          return ''
      }
    },
    getRoom(arg) {
      this.$router.push({ path: '/room/addRoom', query: {
        id: arg.id,
        message: JSON.stringify(arg)
      }})
    },
    getSource() {
      this.$router.push({ path: '/room/addRoom', query: {
      }})
    },
    longPress(item, index, e) {
      console.log('index', index)
      this.touchstartTime = new Date().getTime()
      this.isLongpress = true
      this.timer = setTimeout(() => {
        this.showDeleteView = true
        this.$dd.vibrate({
          duration: 300 // 震动时间，android可配置 iOS忽略

        }).then(res => {
        })
      }, 800)
      e.stopPropagation()
    },
    removePress(item, index, e) {
      this.touchendTime = new Date().getTime()
      const duration = this.touchendTime - this.touchstartTime
      clearTimeout(this.timer)
      const app = this
      if (this.isLongpress && duration >= 800) {
        this.showDeleteView = true
      } else {
        if (this.showDeleteView && duration < 800) {
          Dialog.confirm({
            title: '删除',
            message: `确认删除${item.roomNum}?`
          })
            .then(() => {
              $api.user.deleteRoom(item.id).then(res => {
                Toast('删除成功!')
                app.roomArr.splice(index, 1)
                app.getCountMessage()
              })
            })
            .catch(() => {
              // on cancel
            })
        } else {
          if (!this.showDeleteView) {
            if (item.status === 2) {
              Dialog.confirm({
                title: '提示',
                message: `房间${item.roomNum}已被占用`
              })
                .then(() => {
                  this.getRoom(item)
                })
                .catch(() => {
                  // on cancel
                })
              return
            }
            if (item.status === 4) {
              Dialog.confirm({
                title: '提示',
                message: `房间${item.roomNum}已被停用`
              })
                .then(() => {
                  this.getRoom(item)
                })
                .catch(() => {
                  // on cancel
                })
              return
            }
            this.getRoom(item)
          }
        }
      }
      e.stopPropagation()
    },
    touchmove(item, index, e) {
      console.log('touchmove', item, index)
      this.isLongpress = false
      e.stopPropagation()
    },
    getAdmin() {
      this.showAre = true
    },
    confirmRoom() {
      if (!this.room.status) {
        Toast('请选择房间状态')
        return
      }
      if (this.room.idList.length === 0) {
        Toast('请选择房间')
        return
      }
      $api.user.updateStatusBatch(this.room).then(res => {
        Toast('更换成功!')
        this.deleteShow = false
        this.getCountMessage()
      })
    },
    onConfirmAre(value, index) {
      this.room.status = value.id
      this.room.statusText = value.text
      this.showAre = false
    },
    handleClickContent() {

    }
  }
}
</script>

<style lang="scss" scoped>

.applicationcode{
  width:100%;
  height:100%;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  .content{
    width:100%;
    position: absolute !important;
    overflow-y: scroll;
    margin-top:10px;
    font-family: PingFangSC-Regular, PingFang SC;
    height: calc(100vh - 340px) !important;
    top:440.0px;
    display:flex;
    flex-wrap:wrap;
    padding:0 20.0px;
    box-sizing: border-box;
    flex-shrink:0;
    align-content: flex-start;
    .icon-content{
      width:80.0px;
      height:80.0px;
      display:flex;
      align-items: center;
      justify-content: center;
      margin:20.0px 20.0px 20.0px 0;

      div{
        width:70.0px;
        height:70.0px;
        display: flex;
        flex-direction: column;
        justify-content:center;

        span{
          margin-top:5.0px;
        }
      }
    }
  }

  .iconMove{
    -webkit-animation-duration: 0.75s;  /* 抖动速度 */
    -webkit-animation-iteration-count: 100; /* 抖动次数 */
    animation:  buzz-out 2s ease-in infinite ;
  }
  @-webkit-keyframes buzz-out {

           0% {
            -webkit-transform:  rotate(-10deg);
          }

           25% {
            -webkit-transform:  rotate(10deg);
          }

          50% {
            -webkit-transform: rotate(-10deg);
          }

          75% {
            -webkit-transform: rotate(10deg);
          }

          100% {
            -webkit-transform: rotate(-10deg);
          }
}
  .order-content{
    width:96%;
    margin:10px auto;
    margin-top:10px;
    box-sizing: border-box;
    padding:0px 20px 20px 20px;
    background-color:#ffffff;
    border-radius: 10px;
    font-family: PingFangSC-Medium, PingFang SC;
  }
  .order-color{
    background-color:rgba(119, 119, 119, 0.2)!important;
    color:rgba(119, 119, 119, 0.6)!important;
    .content-message{
       >div:nth-child(2){
         color:rgba(119, 119, 119, 0.6)!important;
       }
    }
    .edite{
      fill:rgba(119, 119, 119, 0.6)!important;
    }
  }
  .order-msg{
    margin-top:30px;
  }
  .title-message{
    padding-top:80px;
  }
  .content-time{
    display:flex;
    justify-content: space-between;
  }
  .chiooce-order{
    padding-right:20px;
  }
  .content-message{
    padding:20px 10px 10px 10px;
    display:flex;
    >div:nth-child(1){
      color:rgba(119, 119, 119, 0.6);
      font-size: 30px;
      flex:1.5;
    }
    >div:nth-child(2){
      padding-left:10px;
      color:rgba(65, 157, 244, 1);
      font-size: 30px;
      flex:3;
    }
  }
  .reson{
    display: flex;
  }
  .edite{
    width:40px;
    height:40px;
    color:rgba(65, 157, 244, 1);
    padding:10px;
    margin-right:20px;
  }
  .delete{
    width:40px;
    height:40px;
    padding:10px 0 10px 10px;
  }
  .remove-time{
    padding:40px 20px;
    text-align:center;
    width:100%;
  }
  .add{
    width:40px;
    height:40px;
  }
  .number{
    font-size:32px;
    font-weight:600;
    color:rgba(119, 119, 119, 1);
  }
  .order-title{
    border-bottom:1px solid rgba(229, 229, 229, 1);
    padding:10px 0;
    color:rgba(119, 119, 119, 0.6);
  }
  .content-footer{
    margin:20px 0;
  }
}
.title-message{
  ::v-deep .van-nav-bar--safe-area-inset-top{
    padding-top:80px!important;
    height:10px!important;
  }
}
.title-message ::v-deep .van-nav-bar__placeholder{
  height:40px!important;
}
.content-title{
  padding:20.0px 30.0px 20.0px 30.0px;
  box-sizing:border-box;
  font-size:14px;
  background-color:#ffffff;
  span{
    font-weight:500;
  }
  position:relative;
  &::after{
    position:absolute;
    display:block;
    content:'';
    top:40%;
    transform: translateY(-50%);
    width:90%;
    height:1.0px;
    background:ghostwhite;
  }
}
.wrapper-content{
  ::v-deep .van-cell__value{
    text-align:center;
    font-size:28px;
  }
}
.wrapper-content{
  padding:20px 0;
}
.add-left{
  padding-right:10.0px;
}
.cancel{}
.contentDialog{
  width:100%;
  height:100%;
  padding: 20.0px 10.0px;
  box-sizing: border-box;
  display:flex;
  flex-wrap: wrap;
  flex-shrink: 0;
}
::v-deep .van-checkbox-group{
  display:flex;
  flex-wrap: wrap;
  max-height: 700px;
  overflow-y:scroll;
}
::v-deep .van-checkbox{
  flex-shrink: 0;
  padding: 20.0px 10.0px;

}
</style>
